<template>
	<view class="detail">
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
			<swiper-item>
				<view class="swiper-item">
					<image :src="detailData.imgUrl" mode="" class="swiper-img"></image>
				</view>
			</swiper-item>
		</swiper>

		<!-- 商品价格和名称 -->
		<view class="detail-list">
			<view class="detail-oprice">{{detailData.oprice}}</view>
			<view class="detail-pprice">{{detailData.pprice}}</view>
			<view class="detail-name">{{detailData.name}}</view>
		</view>

		<!-- 商品详情图 -->
		<view>
			<view>
				<image class="detail-img" src="../../static/image/detail1.jpg"></image>
			</view>
			<view>
				<image class="detail-img" src="../../static/image/detail2.jpg"></image>
			</view>
			<view>
				<image class="detail-img" src="../../static/image/detail3.jpg"></image>
			</view>
			<view>
				<image class="detail-img" src="../../static/image/detail4.jpg"></image>
			</view>
			<view>
				<image class="detail-img" src="../../static/image/detail5.jpg"></image>
			</view>
		</view>

		<!-- 商品列表 -->
		<card cardH1='看了又看'></card>
		<shopList :dataList="dataList"></shopList>

		<!--底部 -->
		<view class="datails-foot">
			<view class="iconfont icon-xiaoxi"></view>
			<view class="iconfont" @tap="goToCart()">&#xe61a;</view>
			<view class='add-shopcart' @tap="showTap()">加入购物车</view>
			<view class="purchase" @tap="showTap()">立即购买</view>
		</view>

		<!-- 底部弹出 -->
		<view class="pop" v-show='isShow' @touchmove.stop.prevent=''>
			<view class="pop-mask" @tap="hidePop()"></view>
			<!-- 内容盒子 -->
			<view class="pop-box" :animation="animationData">
				<view class="">
					<image class="pop-img" :src="detailData.imgUrl" mode=""></image>
				</view>
				<view class="pop-num">
					<view class="">购买数量</view>
					<uniNumBox :min='min' :value='num' @change='changeNum($event)'></uniNumBox>
				</view>
				<view class="pop-yes"  @tap='addCart()'>
					确定
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	import uniNumBox from '../../component/uni/uni-number-box/uni-number-box.vue'
	import $http from "@/common/api/request.js"
	import card from "@/component/like.vue"
	import {mapMutations} from 'vuex'
	import shopList from "@/component/shopList.vue"
	export default {
		data() {
			return {
				num:1,  
				min: 1,
				animationData: {},
				detailData: {},
				isShow: false,
				swiperList: [{
						imgUrl: '../../static/image/details1.jpeg'
					},
					{
						imgUrl: '../../static/image/details2.jpeg'
					},
					{
						imgUrl: '../../static/image/details3.jpeg'
					}
				],
				dataList: [{
						id: 1,
						imgUrl: "../../static/image/details3.jpeg",
						name: "爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款",
						pprice: "$1111",
						oprice: "$999",
						discount: "5.2折"
					},
					{
						id: 2,
						imgUrl: "../../static/image/details3.jpeg",
						name: "爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款",
						pprice: "$1111",
						oprice: "$999",
						discount: "5.2折"
					},
					{
						id: 3,
						imgUrl: "../../static/image/details3.jpeg",
						name: "爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款",
						pprice: "$1111",
						oprice: "$999",
						discount: "5.2折"
					},
					{
						id: 4,
						imgUrl: "../../static/image/details3.jpeg",
						name: "爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款爆款",
						pprice: "$1111",
						oprice: "$999",
						discount: "5.2折"
					}

				]

			}
		},
		onBackPress() {
			if (this.isShow) {
				this.hidePop();
				return true;
			}
		},
		onLoad(e) {
			this.getData(e.id)
		},
		onNavigationBarButtonTap(e) {
			if (e.type === 'share') {
				uni.share({
					"provider": "weixin",
					"type": 0,
					"scene": "WXSceneSession",
					"title": this.detailData.name,
					"href": "http://192.168.28.1:8080/#/pages/details/details?id=" + this.detailData.id + "",
					"imageUrl": this.detailData.imageUrl,
					success: function() {
						uni.showTabBar({
							title: "分享成功"
						})
					},
					fail: function(err) {
						uni.showTabBar({
							title: "分享失败"
						})
					}
				})
			}
		},
		methods: {
			...mapMutations(['addShopCart']),
			//跳转到购物车页面
			goToCart(){
				uni.redirectTo({
					url:"/pages/shop/shop"
				})
			},
			// 加入购物车
			addCart(){
				let shopList = this.detailData;
				this.detailData['checked']=false;
				this.detailData['num']=this.num;
				// 加入购物车
				this.addShopCart(shopList)
				// 隐藏弹出框
				this.hidePop()
				// 提示消息
				uni.showToast({
					title:'加入购物车成功',
					icon:'none'
				})
			},
			// 改变数量 
			changeNum(value){
				this.num=value;
			},
			//请求数据
			getData(id) {
				$http.request({
					url: "/goods/detail",
					data: {
						id: id
					}
				}).then((res) => {
					this.detailData = res[0];
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: "none"
					})
				})

			},

			showTap() {
				var animation = uni.createAnimation({
					duration: 200,
				})
				animation.translateY(2000).step();
				this.animationData = animation.export();
				this.isShow = true;

				setTimeout(() => {
					animation.translateY(0).step();
					this.animationData = animation.export();
				}, 200)
			},
			hidePop() {
				var animation = uni.createAnimation({
					duration: 500,
				})
				animation.translateY(2000).step();
				this.animationData = animation.export();
				this.isShow = true;

				setTimeout(() => {
					animation.translateY(0).step();
					this.isShow = false
				}, 500)
			}

		},

		components: {
			card,
			shopList,
			uniNumBox
		}
	}
</script>

<style scoped>
	.detail {
		padding-bottom: 90rpx;
	}

	swiper {
		width: 100%;
		height: 700rpx;
	}

	.swiper-img {
		width: 100%;
		height: 700rpx;
	}

	.detail-list {
		text-align: center;
		font-weight: bold;
		font-size: 36rpx;
		padding: 16rpx 0;
	}

	.detail-img {
		width: 100%;
	}

	.detail-pprice {
		text-decoration: line-through;
		color: #999999
	}

	.datails-foot {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 90rpx;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.datails-foot .iconfont {
		width: 60rpx;
		height: 60rpx;
		border-radius: 100%;
		background-color: #000000;
		color: white;
		font-size: 50rpx;
		text-align: center;
		margin: 0 10rpx;
	}

	.add-shopcart {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: black;
		color: white;
		border-radius: 40rpx;
	}


	.purchase {
		margin: 0 40rpx;
		padding: 6rpx 30rpx;
		background-color: #49BDFB;
		color: white;
		border-radius: 40rpx;
	}

	.pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
	}

	.pop-mask {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.pop-box {
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		/* 		height: 650rpx; */
		background-color: white;
	}

	.pop-img {
		width: 260rpx;
		height: 260rpx;
	}

	.pop-yes {
		line-height: 90rpx;
		background-color: #49BDFB;
		color: white;
		text-align: center;
	}

	.pop-num {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
